<template>
    <div class="colorItem">
        <div class="colorBorder" :style="style" v-if="colorBorder">

        </div>
        <div class="colorItemContent">
            <slot />
            <div>
                <van-tag v-if="tag" :color="color" style="padding:2px 6px;">{{ tag }}</van-tag>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

interface ColorItemProps{
    color:string,
    tag?:string,
    colorBorder?:boolean
}

const {color="#fff",colorBorder=true} = defineProps<ColorItemProps>();

const style = computed(()=>{    
    return {
        backgroundColor:color
    }
})
</script>
<style lang="less" scoped>
.colorItem{
    border-radius: 10px;
    padding: 16px;
    padding-left: 0;
    border:1px solid #dfdfdf;

    display: flex;

    .colorBorder{
        width: 3px;
        border-top-right-radius: 10px;
        border-bottom-right-radius:10px;
    }

    .colorItemContent{
        width:100px;
        flex-grow:1;
        padding-left: 10px;
    }

}
</style>